<template>
  <Card>
    <div class="flexCSB">
      <Button type="primary" @click="add">新增banner</Button>
    </div>
    <Table class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
    <Page
	  show-total
      class="page"
      :total="total"
      :current.sync="current"
      show-elevator
      @on-change="changePage"
    />
    <Modal title="banner管理" v-model="modal" width="50">
    	<Form ref="form" :model="newData" :label-width="60">
			<FormItem label="状态：">
				<Select v-model="newData.states">
					<Option value="1">启用</Option>
					<Option value="2">禁用</Option>
	          	</Select>
			</FormItem>
			<FormItem label="类型：">
				<Select v-model="newData.type">
	            	<Option value="1">活动</Option>
	            	<Option value="2">场馆介绍</Option>
	            	<Option value="3">公众号推文</Option>
	            	<Option value="4">咨讯</Option>
	          	</Select>
			</FormItem>
			<FormItem label="平台：">
	          	<Select v-model="newData.platformType">
					<template v-for="item in bannerType">
						<Option :value="item.id">{{item.name}}</Option>
					</template>
	          	</Select>
			</FormItem>
			<FormItem label="内容：">
				<Input type="textarea" v-model="newData.introduce" placeholder="请输入内容"></Input>
			</FormItem>
			<FormItem label="图片：">
				<vue-uploadimg :imgUrl="imgUrl" :clear="clear" @uploadImg="uploadImg"></vue-uploadimg>
			</FormItem>
		</Form>
		<div slot="footer">
			<Button type="primary" :loading="loading2" class="Button" @click="submit">提交</Button>
		</div>
	</Modal>
  </Card>
</template>

<script>
	export default {
    	data() {
      		return {
      			loading1: false,
      			loading2: false,
      			columns: [
      				{ title: "内容", key: "introduce", align: "center",minWidth: 300},
      				{ title: "状态", key: "states2", align: "center"},
      				{ title: "平台", key: "platformType2", align: "center"},
      				{ title: "类型", key: "type2", align: "center"},
      				{
				        title: "图片",
				        key: "url",
				        align: "center",
				        render: (h, params) => {
				            return h("img", {
				              	style: {
				                	width: "100px",
				                	marginTop: "6px"
				              	},
				              	attrs: {
				                	src: this.prefix + params.row.url
				              	}
				            });
				        }
			        },{
				        title: "操作",
				        align: "center",
				        render: (h, params) => {
				            return h(
				              	"div",
				              	{
				                	style: {
				                  		display: 'flex'
				                	}
				              	},
				              	[
				                	h("Button",{
				                    	props: {
				                      		type: "warning"
				                    	},
				                    	style: {
				                      		display: "block",
				                      		'marginRight': '10px'
				                    	},
				                    	on: {
				                      		click: () => {
				                        		this.update(params);
				                      		}
				                    	}
				                  	},"修改"),
				                  	h("Button",{
				                    	props: {
				                      		type: "error"
				                    	},
				                    	style: {
				                      		display: "block"
				                    	},
				                    	on: {
				                      		click: () => {
				                        		this.del(params);
				                      		}
				                    	}
				                  	},"删除"),
				                
				            	]
				        )}
				    }

      			],
      			data: [],
      			total: 0,
      			current: 1,
      			modal: false,
      			id: '',
      			newData:{},
      			imgUrl: "",
      			clear: false,
      			bannerType: [],




      		}
      	},
      	created(){
      		this.getBannerPlatformType()
      	},
      	methods:{
      		getBannerPlatformType(){
      			this.loading1 = true;
			    this.$http("/stage/banner/getBannerPlatformType", {

			    }, "get", res => {
			        if (res.data.code == 200) {
			        	this.bannerType = res.data.data
			        	this.findBannerPager()
			        }
			    })
      		},
      		changePage(e) {
		      	this.current = e;
		      	this.findBannerPager();
		    },
      		findBannerPager(){
      			this.loading1 = true;
			    this.$http("/stage/banner/findBannerPager", {
			    	current: this.current,
			    	size: 10,
			    }, "post", res => {
			        if (res.data.code == 200) {
			        	for(let i=0;i<res.data.data.records.length;i++){
			        		if(res.data.data.records[i].type == '1'){
			        			res.data.data.records[i].type2 = '活动'
			        		}
			        		if(res.data.data.records[i].type == '2'){
			        			res.data.data.records[i].type2 = '场馆介绍'
			        		}
			        		if(res.data.data.records[i].type == '3'){
			        			res.data.data.records[i].type2 = '公众号推文'
			        		}
			        		if(res.data.data.records[i].type == '4'){
			        			res.data.data.records[i].type2 = '咨讯'
			        		}
			        		if(res.data.data.records[i].states == '1'){
			        			res.data.data.records[i].states2 = '启用'
			        		}
			        		if(res.data.data.records[i].states == '2'){
			        			res.data.data.records[i].states2 = '禁用'
			        		}
			        		for(let j=0;j<this.bannerType.length;j++){
			        			if(res.data.data.records[i].platformType == this.bannerType[j].id){
				        			res.data.data.records[i].platformType2 = this.bannerType[j].name
				        		}
			        		}
			        	}
			         	this.data = res.data.data.records
			         	this.total = res.data.data.total
			        } else {
			          	this.$Message.error(res.data.msg);
			        }
			        this.loading1 = false
			    })
      		},
      		add(){
      			this.imgUrl = ''
      			this.modal = true
      			this.newData = {
      				introduce: "",
					states: '1',
					type: '1',
					url: "",
					platformType: this.bannerType[0].id
      			}
      			this.id = ''
      		},
      		uploadImg(data){
      			this.newData.url = data
      		},
      		submit(){
      			this.loading2 = true;
      			let data = {}
      			if(this.id == ''){
      				data = {
      					introduce: this.newData.introduce,
						states: this.newData.states,
						type: this.newData.type,
						url: this.newData.url,
						platformType: this.newData.platformType,
      				}
      			}else{
      				data = {
      					introduce: this.newData.introduce,
						states: this.newData.states,
						type: this.newData.type,
						url: this.newData.url,
						platformType: this.newData.platformType,
						id: this.id
      				}
      			}
			    this.$http("/stage/banner/saveOrUpdate", data, "post", res => {
			        if (res.data.code == 200) {
			         	this.$Message.success('提交成功');
			         	this.modal = false
			         	this.findBannerPager()
			        } else {
			          	this.$Message.error(res.data.msg);
			        }
			        this.loading2 = false
			    })
      		},
      		update(data){
      			this.newData = {
      				introduce: data.row.introduce,
					states: data.row.states.toString(),
					type: data.row.type.toString(),
					url: data.row.url,
					platformType: data.row.platformType
      			}
      			this.id = data.row.id
      			this.modal = true
      			if(data.row.url != this.imgUrl){
      				this.clear = ! this.clear
      			}
      			this.imgUrl = data.row.url
      		},
      		del(params){
      			this.$Modal.confirm({
			        title: "提示",
			        content:
			          "<p>确定要删除<strong> " + params.row.introduce + " </strong>吗？</p>",
			        onOk: () => {
			          this.loading1 = true;
			          this.$http(
			            "/stage/banner/deleteBanner",
			            {
			              id: params.row.id,
			            },
			            "get",
			            res => {
			              if (res.data.code == 200) {
			                this.$Message.success("删除成功");
			                this.current = 1
			                this.findBannerPager();
			              } else {
			                this.$Message.error(res.data.msg);
			              }
			            }
			          );
			        },
			        onCancel: () => {}
			    });
      		},



      	},

  	}
</script>

<style scoped>
	
</style>